<template>
  <div class="all">
    <top-header :isLeft="true" title="菜篮子"> </top-header>
    <div class="kon" v-show="food.length == 0">
      将用料丢进菜篮子，每次去超市就不会忘记买需要的东西了
    </div>
    <div class="shicaiList">
      <div v-for="(item, index) in food" :key="index" class="shicai">
        <p @click="to(item)">{{ item.foodname }}</p>
        <a-icon type="right" class="a-icon" />
        <button @click="addshicai(item)">+ 添加用料</button>
        <button @click="delshicai(item)">删除这个清单</button>
        <div v-if="item.food != ''">
          <div
            v-for="(i, ind) in JSON.parse(item.food)"
            :key="ind"
            class="list"
          >
            <p >
              <i class="iconfont" @click="yimai(item, i, ind)">&#xe60c;</i
              ><span>{{ i.name }}</span>
            </p>
          </div>
          <div v-show="yimaifood == 1" class="list2">
            <p>
              <i class="iconfont" @click="shouqi()" v-if="showyimai == 1"
                >&#xe602;</i
              ><i class="iconfont" @click="zhankai()" v-else>&#xe601;</i>已完成
            </p>
            <div
              v-for="(j, index) in shicai3"
              :key="index"
              class="list3"
              v-show="showyimai == 1"
            >
              <div v-show="j.foodname == item.foodname">
                <div
                  v-for="(k, inde) in JSON.parse(j.food)"
                  :key="inde"
                  class="list4"
                >
                  <p>
                    <i class="iconfont" @click="reyimai(item, j, k, inde)"
                      >&#xe653;</i
                    ><span>{{ k.name }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="box" class="setbox" v-show="tan == 'A'">
          <div class="null" @click="close()"></div>
          <div class="content">
            <div class="header">
              <p class="biaoti">添加到{{ name }}</p>
              <p class="baocun" @click="save(item)">保存</p>
            </div>
            <div class="shuru">
              <label>用料名</label
              ><input type="text" placeholder="输入用料名" v-model="val" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <i class="liebiao iconfont" @click="liebiao()">&#xe600;</i>
    <div class="setbox2" v-show="showLiebiao == 1">
      <div class="null2" @click="close()"></div>
      <div class="content2">
        <p @click="qingdan()">新增清单</p>
        <hr />
        <p @click="delall()">清空菜篮子</p>
        <hr class="quxiao" />
        <p @click="close()">取消</p>
      </div>
    </div>
    <div class="setbox3" v-show="showqingdan == 1">
      <div class="null3" @click="close()"></div>
      <div class="content3">
        <div class="header3">
          <p class="biaoti">新建清单</p>
          <p class="baocun" @click="wancheng()">完成</p>
        </div>
        <div class="shuru">
          <label>清单名</label
          ><input type="text" placeholder="输入清单名" v-model="qingdanval" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import TopHeader from "../components/TopHeader.vue";
import QS from "qs";
export default {
  components: { TopHeader },
  data() {
    return {
      food: "",
      foodList:'',
      tan: "",
      name: "",
      shicai: [],
      shicai1: "",
      shicai2: [],
      shicai3: "",
      shicai4: [],
      val: "",
      qingdanval: "",
      showLiebiao: "",
      showqingdan: "",
      yimaifood: "",
      showyimai: "",
      store: "",
    };
  },
  created() {
    this.showcai();
  },
  mounted() {
    this.store = this.$store.getters.foods;
    // console.log(this.store)
  },
  methods: {
    to(item) {
      // this.name = item.foodname;
      this.$router.push({
        name: "FoodContent",
        query: {
          store: this.store,
          name: item.foodname,
        },
      });
    },
    zhankai() {
      this.showyimai = 1;
    },
    shouqi() {
      this.showyimai = 0;
    },
    qingdan() {
      this.showLiebiao = 0;
      this.showqingdan = 1;
    },
    liebiao() {
      this.showLiebiao = 1;
    },
    close() {
      this.tan = "B";
      this.showLiebiao = 0;
      this.showqingdan = 0;
    },
    showcai() {
      this.$ajax.get("/mysql/shicaiselect.php",{
        params:{
          id:localStorage.id
        }
      }).then((res) => {
        console.log(res.data);
        this.food = res.data;
        this.food.some((i)=>{
          this.foodList = JSON.parse(i.food)
        })
      });
      this.$ajax.get("/mysql/yimaiselect.php",{
        params:{
          id:localStorage.id
        }
      }).then((res) => {
        console.log(res.data);
        this.shicai3 = res.data;
        this.shicai3.some((i) => {
          console.log(i);
          this.yimaifood = i.type;
        });
      });
    },
    addshicai(item) {
      this.name = item.foodname;
      this.isshow = true;
      this.tan = "A";
    },
    save(item) {
      console.log(this.name);
      this.$ajax
        .get("/mysql/shicaiwhere.php", {
          params: {
            food: this.name,
          },
        })
        .then((res) => {
          console.log(res.data);
          let arr = res.data;
          arr.some((i) => {
            // console.log(this.val)
            this.shicai = JSON.parse(i.food);
            console.log(this.shicai);
            this.shicai.push({ name: this.val });
            this.shicai = JSON.stringify(this.shicai);
            let params = {
              food: this.shicai,
              foodname: this.name,
            };
            this.$ajax
              .post("/mysql/shicaiModify.php", QS.stringify(params))
              .then((res) => {
                console.log(res);
                this.tan = "B";
                this.$router.go(0);
              });
          });
        });
    },
    delshicai(item) {
      this.name = item.foodname;
      // console.log(this.name)
      Dialog.confirm({
  title: '提示',
  message: '您确定要删除清单“'+this.name+'”吗？',
})
  .then(() => {
      this.$ajax
          .get("/mysql/shicaidel.php", {
            params: {
              foodname: this.name,
            },
          })
          .then((res) => {
            console.log(res);
            this.$router.go(0);
          });
        this.$ajax
          .get("/mysql/yimaidel.php", {
            params: {
              foodname: this.name,
            },
          })
          .then((res) => {
            console.log(res);
          });
  })
  .catch(() => {
       return false;
  });
     
    },
    delall() {
      Dialog.confirm({
  title: '提示',
  message: '您确定要清空菜篮子吗？',
})
  .then(() => {
     this.$ajax.get("/mysql/shicaidelall.php").then((res) => {
          console.log(res);
          this.$router.go(0);
        });
        this.$ajax.get("/mysql/yimaidelall.php").then((res) => {
          console.log(res);
        });
  })
  .catch(() => {
    return false;
  });
     
    },
    wancheng() {
      console.log(this.shicai);
      let params = {
        food: "",
        foodname: this.qingdanval,
        user_id:localStorage.id
      };
      this.$ajax.post("/mysql/shicai.php", QS.stringify(params)).then((res) => {
        console.log(res);
        this.showqingdan = 0;
        this.$router.go(0);
      });
    },
    yimai(item, i, ind) {
      this.name = item.foodname;
      this.shicai = item.food;
      this.shicai = JSON.parse(this.shicai);
      this.shicai.splice(ind, 1);
      this.shicai1 = JSON.stringify(this.shicai);

      let params = {
        food: this.shicai1,
        foodname: this.name,
      };
      this.$ajax
        .post("/mysql/shicaiModify.php", QS.stringify(params))
        .then((res) => {
          console.log(res);
          // this.tan = "B";
          this.$router.go(0);
        });

      this.$ajax.get("/mysql/yimaiselect.php",{
        params:{
          id:localStorage,id
        }
      }).then((res) => {
        console.log(res);
        let a = res.data;
        console.log(a);

        if (a.length === 0) {
          this.shicai2.push(i);
          this.shicai2 = JSON.stringify(this.shicai2);
          console.log(this.shicai2);
          let params = {
            food: this.shicai2,
            foodname: this.name,
            type: 1,
            user_id:localStorage.id
          };
          this.$ajax
            .post("/mysql/yimai.php", QS.stringify(params))
            .then((res) => {
              console.log(res);
              this.$ajax.get("/mysql/yimaiselect.php",{
                id:localStorage.id
              }).then((res) => {
                console.log(res);
                this.shicai3 = res.data;
              });
            });
        }
        if (a.length > 0) {
          let arr = res.data;
          arr.some((j) => {
            if (j.foodname.hasOwnProperty(this.name)) {
              this.$ajax
                .get("/mysql/yimaiwhere.php", {
                  params: {
                    foodname: this.name,
                  },
                })
                .then((res) => {
                  let arr2 = res.data;
                  arr2.some((k) => {
                    this.shicai2 = k.food;
                    this.shicai2 = JSON.parse(this.shicai2);
                    this.shicai2.push(i);
                    this.shicai2 = JSON.stringify(this.shicai2);
                    console.log(this.shicai2);

                    let params = {
                      food: this.shicai2,
                      foodname: k.foodname,
                    };
                    this.$ajax
                      .post("/mysql/yimaiModify.php", QS.stringify(params))
                      .then((res) => {
                        console.log(res);
                        this.$ajax
                          .get("/mysql/yimaiwhere.php", {
                            params: {
                              foodname: this.name,
                            },
                          })
                          .then((res) => {
                            console.log(res);
                            this.shicai3 = res.data;
                            console.log(this.shicai3);
                          });
                      });
                  });
                });
            } else {
              this.shicai2.push(i);
              this.shicai2 = JSON.stringify(this.shicai2);
              console.log(this.shicai2);
              let params = {
                food: this.shicai2,
                foodname: this.name,
                type: 1,
                user_id:localStorage.id
              };
              this.$ajax
                .post("/mysql/yimai.php", QS.stringify(params))
                .then((res) => {
                  console.log(res);
                  this.$ajax
                    .get("/mysql/yimaiwhere.php", {
                      params: {
                        foodname: this.name,
                      },
                    })
                    .then((res) => {
                      console.log(res);
                      this.shicai3 = res.data;
                    });
                });
            }
          });
        }
      });
    },
    reyimai(item, j, k, inde) {
      console.log(j.id);
      console.log(k);
      this.name = item.foodname;
      console.log(this.name);
       this.$ajax.get('/mysql/yimaidelid.php',{
         params:{
           id:j.id
         }
       }).then((res)=>{
         console.log(res)
       })
      this.$ajax
        .get("/mysql/shicaiwhere.php", {
          params: {
            food: this.name,
          },
        })
        .then((res) => {
          console.log(res.data);
          let arr3 = res.data
          arr3.some((i)=>{
            console.log(i.food)
          
            this.shicai =JSON.parse(i.food) 
            this.shicai.push(k)
            this.shicai = JSON.stringify(this.shicai)
            console.log(this.shicai)
            let params ={
              foodname:this.name,
              food:this.shicai
            }
            this.$ajax.post('/mysql/shicaiModify.php',QS.stringify(params)).then((res)=>{
             console.log(res)
             this.$router.go(0)
            })
            
          
          })
        });
    },
  },
};
</script>
<style lang="scss" lang="scss">
.all {
  background: rgb(230, 224, 224);
}
.kon {
  background: white;
  margin-top: 100px;
  text-align: center;
  font-size: 16px;
}
.shicaiList {
  margin-top: 70px;

  .shicai {
    margin-top: 15px;
    padding: 20px 10px;
    background: white;
    p {
      width: 340px;
      font-size: 18px;
      margin-bottom: 5px;
    }
    .a-icon {
      float: right;
      margin-top: -25px;
    }
    button {
      margin-right: 15px;
      background: white;
      border-radius: 5px;
      border: 1px solid red;
      color: red;
    }
  }
  .list {
    margin-top: 10px;
    background: rgb(238, 235, 235);
    p {
      margin: 0;
      i {
        margin-left: 10px;
        font-size: 28px;
      }
      span {
        margin-left: 50px;
        // margin-top: -15px;
        font-size: 18px;
      }
    }
  }
}
.setbox {
  margin-left: -10px;
  position: fixed;
  top: 60px;
  width: 100%;
  height: 100%;
  .null {
    background: rgba(0, 0, 0, 0.1);
    height: 30%;
  }
  .content {
    margin: 0 10px;
    background: white;
    height: 70%;
  }
  .header {
    color: black;
    padding-top: 30px;
    .baocun {
      color: red;
      width: 60px;
      margin-top: -30px;
      float: right;
    }
  }
  .shuru {
    margin-top: 60px;
    label {
      margin-right: 60px;
    }
    input {
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 1px solid gray;
    }
  }
}
.liebiao {
  font-size: 30px;
  color: red;
  position: fixed;
  bottom: 50px;
  right: 10px;
}
.setbox2 {
  // margin-left: -10px;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  .null2 {
    background: rgba(0, 0, 0, 0.5);
    height: 70%;
  }
  .content2 {
    margin: 0 10px;
    background: white;
    height: 30%;
    p {
      height: 30%;
      padding-top: 20px;
      margin-bottom: 0;
      text-align: center;
    }
    hr {
      margin: 0 -10px;
    }
    .quxiao {
      background: rgb(240, 237, 237);
      height: 5px;
    }
  }
}
.setbox3 {
  position: fixed;
  top: 60px;
  width: 100%;
  height: 100%;
  .null3 {
    background: rgba(0, 0, 0, 0.5);
    height: 30%;
  }
  .content3 {
    margin: 0 10px;
    background: white;
    height: 70%;
  }
  .header3 {
    color: black;
    padding-top: 30px;
    .baocun {
      color: red;
      width: 60px;
      margin-top: -30px;
      float: right;
    }
  }
  .shuru {
    margin-top: 60px;
    label {
      margin-right: 60px;
    }
    input {
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 1px solid gray;
    }
  }
}
.list2 {
  color: red;
  margin-top: 10px;
  .list4 {
    margin-top: 10px;
    background: rgb(238, 235, 235);
    p {
      margin: 0;
      i {
        margin-left: 10px;
        font-size: 28px;
      }
      span {
        color: gray;
        margin-left: 50px;
        // margin-top: -15px;
        font-size: 18px;
        text-decoration: line-through;
      }
    }
  }
}
</style>